<!-- <template>
  <div>
    <van-address-list v-model="chosenAddressId" :list="list" @select="onselect" @add="onAdd"/>
  </div>
</template> -->
<template>
  <div>
    <ul>
      <li v-for="address in list" :key="address.id" @click="onselect(address)">
        <div class="massage">
          <div><span class="name">{{address.name}}</span>
            <span class="sex">{{address.sex}}</span>
            <span class="phonenum">{{address.phone}}</span></div>
          <div><span class="Tag">{{address.tag}}</span><span
              class="addre">{{address.address}}{{address.address_detail}}</span></div>
        </div>
      </li>
    </ul>
    <div>
      <router-link to='/addAdress'>
        <div class="add">
          <i class="iconfont icon-add_circle"></i>
          <span>新增收货地址</span>
        </div>
      </router-link>
    </div>
    <van-dialog v-model="showtag">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2118000332,1471525266&fm=26&gp=0.jpg"
        class="img3" />
      <div>{{message}}</div>
    </van-dialog>
  </div>
</template>
<script>
  // import Cookie from "js-cookie";
  export default {
    name: 'selectAddress',
    data() {
      return {
        userId: "",
        chosenAddressId: 15653,
        list: [],
        message: "未登录",
        showtag: false,
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        if (!sessionStorage.getItem("user")) {
          vm.showtag = !vm.showtag;
          console.log("未登录");
        } else {
          let uId = JSON.parse(sessionStorage.getItem("user"));
          let userId = uId.id;
          const request1 = vm.axios.get("https://elm.cangdu.org/v1/users/" + userId + "/addresses");
          vm.axios.all([request1]).then(vm.axios.spread((res1) => {
            vm.list = res1.data;
            // console.log(vm.list);
          })).catch(err => console.log(err));
          vm.$store.commit("changeTitle", "选择地址");
          vm.$store.commit("changeShowBack", true);
        }
      });
    },
    methods: {
      onselect(address) {
        localStorage.setItem("selectAdress", JSON.stringify(address));
        this.$router.push({ name: "commitOrder" },);
      },
      onAdd() {
        this.showtag = !this.showtag;
        if (!sessionStorage.getItem("user")) {
          this.showtag = !this.showtag;
          console.log("未登录");
        } else {
        this.$router.push({ name: "addAdress" },);
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  ul li {
    list-style: none;
    text-align: left;
    margin-bottom: 10px;
    padding: 20px;
  }

  ul li:nth-child(even) {
    background-color: lightgrey;
  }

  a {
    text-decoration: none;
    color: black;
  }

  .massage {
    margin-left: 30px;
    /*no*/
  }

  .name {
    font-size: .5rem;
    font-weight: 700;
  }

  .sex {
    color: #333;
    font-weight: 200;
    font-size: .4rem;
    margin: 0 3px;
    /*no*/
  }

  .phonenum {
    color: #333;
    font-weight: 400;
    font-size: .4rem;
  }

  .Tag {
    font-size: 0.3rem;
    color: #fff;
    border-radius: 0.1rem;
    background-color: #ff5722;
    line-height: 0.6rem;
    padding: 0 0.1rem;
    margin-right: 0.3rem;
  }

  .addre {
    font-size: .4rem;
    color: #777;
  }

  button {
    outline: none;
    border: none;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    background-color: green;
    color: white;
  }

  .icon-add_circle {
    width: 50px;
    /*no*/
    color: #3190e8;
  }

  .add {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    font-size: 0.5rem;
    color: #3190e8;
    text-align: center;
    width: 100%;
    padding: 0.3rem 0;
  }

  .icon-add_circle:before {
    font-size: 30px;
    /*no*/
  }
  .img3 {
    width: 100px;
    margin: 0.4rem;
  }

  .van-dialog {
    font-size: 0.4rem;
  }
</style>